@charset "utf-8";
@import "reset";
@import "utils";
@import "comon";
.Table_web{
    @include webbg;
//  text-align: center;
    .table_head{
        text-align: center;
        margin-top: r(15);
//      display: none;
        h3{
            font-size: r(30);
            color: #E7C598;  
        }
    }
    //  桌子
    .table_content{
        height: 85%;
        width: 100%;
        overflow: auto;
        //主宾桌
        .Theguest_table{
            width:r(216);
            margin: auto;
            margin-top: r(20);
            padding-top: r(57);
            position: relative;
            text-align: start;
//          overflow: hidden;
            .big_table{
                width:r(125);
                height: r(125);
                background: #e7c598;
                margin: auto;
                border-radius: 50%;
                text-align: center;
                line-height: r(125);
                box-shadow: 1.5px 2px 0.7px black;
                p{
                    font-size: r(20);
                    color: #BF0C21;
                }
            }
            .small_Chair{
                width: r(50);
                height: r(50);
                background: #E7C598;
                border-radius: 50%;
                box-shadow: 1.5px 2px 0.7px black;
                @include aImg;
            }
            >div:nth-child(1){
                position: absolute;
                top:r(47);
                left: 0;
            }
            >div:nth-child(2){
                position: absolute;
                top:r(47);
                right: 0;
            }
            >div:nth-child(3){
                position: absolute;
                top:r(0);
                left:r(82);
            }
            >div:nth-child(4){
                position: absolute;
                top:r(143);
                left:r(0);
            }
            >div:nth-child(5){
                position: absolute;
                top:r(143);
                right:r(0);
            }
            >div:nth-child(6){
                position: absolute;
                top:r(191);
                left:r(82);
            }
        }
        
        .transe{
            transition: all 1.5s;
            transform: scale(2);
        }
        //客宾桌
        .guest_table_All{
            width: r(455);
            margin: 0 auto;
            .guest_table{
                width:r(216);
                margin-top: r(25);
                padding-top: r(57);
                position: relative;
                transform: scale(.75);
                display: inline-block;
                //桌子
                .big_table{
                    width:r(125);
                    height: r(125);
                    background: #e7c598;
                    margin: auto;
                    border-radius: 50%;
                    text-align: center;
                    line-height: r(125);
                    box-shadow: 1.5px 2px 0.7px black;
                    text-align: center;
                    p{
                        font-size: r(25);
                        color: #BF0C21;
                    }
                   .big_table_pic{
                       vertical-align: middle;
                       display: inline-block;
                        width:r(65) ;
                        height: r(65);
                        @include aImg;
                    }
                }
                //座位
                .small_Chair{
                    width: r(50);
                    height: r(50);
                    background: #E7C598;
                    border-radius: 50%;
                    box-shadow: 1.5px 2px 0.7px black;
                    @include aImg;
                }
                >div:nth-child(1){
                    position: absolute;
                    top:r(47);
                    left: 0;
                }
                >div:nth-child(2){
                    position: absolute;
                    top:r(47);
                    right: 0;
                }
                >div:nth-child(3){
                    position: absolute;
                    top:r(0);
                    left:r(82);
                }
                >div:nth-child(4){
                    position: absolute;
                    top:r(143);
                    left:r(0);
                }
                >div:nth-child(5){
                    position: absolute;
                    top:r(143);
                    right:r(0);
                }
                >div:nth-child(6){
                    position: absolute;
                    top:r(191);
                    left:r(82);
                }
            }   
             .Transe{
                transition: all 1.5s;
                transform: scale(2);
            } 
        }
    }
    //宾客进来信息
    .Guests_information{
        text-align: center;
        display: none;
        p{
            font-size: r(25);
            color: #E7C598;
        }
    }
    //目前宾客人数
    .Number_guests{
        text-align: center;
        display: none;
        p{
            font-size: r(25);
            color: #E7C598;
        }
    }
    //按钮
    #shengC{
//      display: none;
        text-align: center;
        margin-top: r(15);
        .table_content_button{
            display: inline-block;
            width: r(320);
            height: r(55);
            background: url(../img/an_03.png) no-repeat center center/cover;
            font-size: r(23);
            text-align: center;
            line-height: r(55);
            color: #E7C598;
        }
    }
    //底部home 外部引用
}

//分享页面
.Table_Share{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    div{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: r(415);
        height: r(250);
        background: #E7C598;
        text-align: center;
        div{
            
            width: r(45);
            height: r(45);
            border-radius: 50%;
            display: inline-block;
            @include aImg;
            right: r(35);
            top: r(30);
            margin-right: r(20);
        }
        >p{
            transform: translateY(80%);
            color: #BF0C21;
            font-size: r(25);
            
        }
    }
}

//主人再次进来弹框

.master_ComeIn{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    div{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: r(415);
        height: r(250);
        background: #E7C598;
        text-align: center;
        >div:nth-child(1){
            width: r(45);
            height: r(45);
            border-radius: 50%;
            display: inline-block;
            @include aImg;
//          right: r(35);
            top: r(30);
            margin-right: r(20);
        }
        >p{
            transform: translateY(-90%);
            color: #BF0C21;
            font-size: r(25);
            
        }
        >div:nth-child(3){
            margin-top: r(-20);
            background: #BF0C21;
            width: r(328);
            height: r(72);
            border-radius: r(8);
            >a{
                display: block;
                p{
                    color: #E7C598;
                    font-size: r(25);
                }
            }
        }
        >div:nth-child(4){
             margin-top: r(50);
            background: #BF0C21;
            width: r(328);
            height: r(40);
            border-radius: r(8);
            line-height: r(40);
            >a{
                display: block;
                color: #E7C598;
                font-size: r(25);
            }
        }
    }
}
//宾客进入弹框
.guests_ComeIn{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    div{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: r(415);
        height: r(250);
        background: #E7C598;
        text-align: center;
        >div:nth-child(1){
            width: r(45);
            height: r(45);
            border-radius: 50%;
            display: inline-block;
            @include aImg;
//          right: r(35);
            top: r(30);
            margin-right: r(20);
        }
        >p{
            transform: translateY(-90%);
            color: #BF0C21;
            font-size: r(25);
            
        }
        >div:nth-child(3){
            margin-top: r(-35);
            background: #BF0C21;
            width: r(220);
            height: r(40);
            border-radius: r(8);
            color: #E7C598;
            font-size: r(25);
        }
        >div:nth-child(4){
             margin-top: r(15);
            background: #BF0C21;
            width: r(220);
            height: r(40);
            border-radius: r(8);
            line-height: r(40);
            >a{
                display: block;
                color: #E7C598;
                font-size: r(25);
            }
        }
        >div:nth-child(5){
            margin-top: r(70);
            background: #BF0C21;
            width: r(220);
            height: r(40);
            border-radius: r(8);
            color: #E7C598;
            font-size: r(25);
        }
    }
}

